<script setup>
import { findAll } from '@/api/index';
import { onMounted, unref, ref } from 'vue';

let domList2 = []
const wrapper2 = ref(null)

const getData = () => {
  findAll().then(res => {
    if(res.code == '0') {
      console.log(res.data)
    }
  })
}

const getImgs = (el) => {
  domList2.push(el)
}

const scrollListener = () => {
  const callback = (entries) => {
    entries.forEach(item => {
      // 出现到可视区
      // console.log(item.intersectionRatio)
      if (item.intersectionRatio > 0) {
        let imgSrc = item.target.getAttribute('val')
        if (imgSrc) {
          setTimeout(() => {
            item.target.src = imgSrc
            item.target.removeAttribute('val')
          }, 1500)
        }
      }
    })
  }
  const observer = new IntersectionObserver(callback)

  domList2.forEach(item => {
    observer.observe(unref(item))
  })
}

onMounted(() => {
  // getData()
  scrollListener()
})
</script>

<template>
<div class="wrapper" ref="wrapper2">
  <img v-for="item in 10" :ref="getImgs" src="../../../src/images/loading.gif" :val="'../../../src/images/'+(item+11)+'.png'" class="img-item" />
</div>
</template>

<style lang="scss" scoped>
.wrapper {
  width: 400px;
  height: 400px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  overflow: scroll;
  .img-item {
    width: 100px;
    height: 100%;
  }
}
</style>